const splitter = document.querySelector('.vertical-splitter');
const leftPane = document.getElementById('leftPane');
const rightPane = document.getElementById('rightPane');
let isDragging = false;

splitter.addEventListener('mousedown', function (e) {
    isDragging = true;
    document.body.style.cursor = 'col-resize';
    document.body.style.userSelect = 'none';
});

document.addEventListener('mousemove', function (e) {
    if (!isDragging) return;

    const containerRect = leftPane.parentElement.getBoundingClientRect();
    const offset = e.clientX - containerRect.left;
    const leftWidth = Math.min(Math.max(offset, 100), containerRect.width - 100);

    leftPane.style.width = leftWidth + 'px';
    rightPane.style.width = (containerRect.width - leftWidth - splitter.offsetWidth) + 'px';
});

document.addEventListener('mouseup', function () {
    if (isDragging) {
        isDragging = false;
        document.body.style.cursor = 'default';
        document.body.style.userSelect = '';
    }
});